<template>
  <view class="particle-wrap">
    <view class="rotate-box">
      <view class="shuttle">
        <shuttle></shuttle>
      </view>
    </view>
    <view class="starry-sky">
      <starry-sky></starry-sky>
    </view>
  </view>
</template>
<script>
import Shuttle from './shuttle.vue';
import StarrySky from './starry-sky.vue';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: { Shuttle, StarrySky },
  data() {
    return {};
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
view {
  max-width: none;
}
.particle-wrap {
  // position: absolute;
  // top: 0;
  // left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.rotate-box {
  position: absolute;
  top: calc(50% - 60vw);
  left: calc(50% - 60vw);
  width: 120vw;
  height: 120vw;

  border-radius: 50%;
  // opacity: 0;
  animation: rotate-star 1.5s ease-in 0s 1 normal forwards;

  .shuttle {
    position: absolute;
    top: 50%;
    left: 0;
    animation: rotate-self 1s ease-in-out 0s 2 normal forwards;
  }
}

.starry-sky {
  opacity: 0;
  animation: fade-end 1.5s ease-in 1.4s 1 normal forwards;
}

@keyframes rotate-star {
  0% {
    // opacity: 0;
    transform: scale(1) rotate(0deg) skew(0);
  }
  100% {
    opacity: 0;
    transform: scale(0) rotate(360deg) skew(20deg);
  }
}
@keyframes rotate-self {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes fade-end {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>
